<!-- 调拨单-列表 -->
<template>
	<view class="content">

		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 顶部导航栏 -->
			<template #top>
				<u-navbar :fixed="false" :title="titleName" :autoBack="true" :safeAreaInsetTop="true"
					leftIconColor="#fff">
					<view slot="right" @click="showSearch=true">
						<uni-icons type="search" size="18" color="#fff"></uni-icons>
					</view>
				</u-navbar>
			</template>

			<!-- 单据列表 -->
			<view class="content-refresh">
				<view class="module" v-for="(row,index) in dataList" @click="intoRow(row)">
					<view>
						<view class="label flex-box">
							<view class="sn">{{index+1}}</view>
							<view class="flex-main djcode">单据编号<text>{{row.FCode}}</text></view>
						</view>

						<view class="cmid flex-box">
							<!-- 分割线 -->
							<u-line margin="8px 0"></u-line>
							<!-- 列表内容 -->
							<view>
								<uni-icons fontFamily="CustomFontPlatform" :size="20"
									color="#808080">{{$utils.toUniCode('&#xe7ac;')}}</uni-icons>
								<view class="cmidLabel">单据日期</view>
								<view class="cmidValue">{{row.FDate}}</view>
							</view>
							<view>
								<uni-icons fontFamily="CustomFontPlatform" :size="20"
									color="#808080">{{$utils.toUniCode('&#xe689;')}}</uni-icons>
								<view class="cmidLabel">出库仓库</view>
								<view class="cmidValue">{{row.FCKWarehouseName}}</view>
							</view>
							<view>
								<uni-icons fontFamily="CustomFontPlatform" :size="20"
									color="#808080">{{$utils.toUniCode('&#xe68d;')}}</uni-icons>
								<view class="cmidLabel">入库仓库</view>
								<view class="cmidValue">{{row.FRKWarehouseName}}</view>
							</view>
							<view>
								<uni-icons fontFamily="CustomFontPlatform" :size="20"
									color="#808080">{{$utils.toUniCode('&#xea2d;')}}</uni-icons>
								<view class="cmidLabel">制单人</view>
								<view class="cmidValue">{{row.Creater}}</view>
							</view>
							<!-- 单据状态 -->
							<view class="approval" v-if="row.Approve">
								<image src="/hybrid/html/wms/image/approval_success.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>

		<!-- 新增按钮 -->
		<view class="fix-button" @click="addRow()">
			<image src="/hybrid/html/wms/image/addNew.png"></image>
		</view>

		<!-- 查询弹窗 -->
		<u-popup :show="showSearch" :safeAreaInsetBottom="true" @close="closeSearch">
			<view :style="$utils.disposeSafeBottomFun()" class="listSearch">
				<u--form labelPosition="left" :model="searchData" labelWidth="100" ref="uForm">
					<u-form-item label="制单人" prop="Creater" borderBottom @click="openBaseScreen_check('制单人')">
						<u--input :value="searchData.Creater" disabled disabledColor="#ffffff" placeholder="请选择制单人"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="单据开始日期" prop="FBDate" borderBottom @click="openDate(1)">
						<u--input :value="dateFormat(searchData.FBDate)" disabled disabledColor="#ffffff"
							placeholder="请选择单据开始日期" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="单据结束日期" prop="FEDate" borderBottom @click="openDate(2)">
						<u--input :value="dateFormat(searchData.FEDate)" disabled disabledColor="#ffffff"
							placeholder="请选择单据结束日期" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="出库仓库" prop="FCKWarehouseName" borderBottom @click="openBaseScreen('出库仓库')">
						<u--input :value="searchData.FCKWarehouseName" disabled disabledColor="#ffffff"
							placeholder="请选择出库仓库" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="入库仓库" prop="FRKWarehouseName" borderBottom @click="openBaseScreen('入库仓库')">
						<u--input :value="searchData.FRKWarehouseName" disabled disabledColor="#ffffff"
							placeholder="请选择入库仓库" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="审核状态" prop="ApproveName" borderBottom @click="openBaseScreen('审核状态')">
						<u--input :value="searchData.ApproveName" disabled disabledColor="#ffffff" placeholder="请选择审核状态"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
				<view class="searchPanel">
					<u-button type="info" color="#51d0d0" :plain="true" text="重置" @click="reset"></u-button>
					<u-button type="primary" color="#51d0d0" text="确认" @click="searchList"></u-button>
				</view>
			</view>
		</u-popup>

		<!-- 日期选择 -->
		<u-datetime-picker ref="datetimePicker" :show="showDate" :title="getDateTitle()" v-model="currentDate"
			mode="date" :formatter="formatter" :closeOnClickOverlay="true" @confirm="confirmDate" @cancel="cancelDate"
			@close="cancelDate"></u-datetime-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSearch: false,
				showDate: false,
				menu: {},
				titleName: '',
				type: '',
				dataList: [],
				currentDate: null,
				dateIndex: 1,
				searchData: {
					pageSize: 20,
					pageIndex: 1,
					FBDate: '',
					FEDate: '',
					Creater: '',
					FCKWarehouseID: 0,
					FCKWarehouseName: '',
					FRKWarehouseID: 0,
					FRKWarehouseName: '',
					Approve: -1,
					ApproveName: '全部',
				},
				FilterFormData: { // 主表多选字段数据存储
					CreaterData: [],
					CreaterDataJoin: '',
				},
			}
		},

		created() {
			let that = this;
			let menu = that.$store.state.Menu;
			that.menu = menu;
			that.titleName = that.menu.APFunName + '列表';
		},

		mounted() {
			let that = this;
			uni.$on('BatchListChoice', function(ret) {
				let selectItem = ret.data;

				if (ret.type == '出库仓库') {
					that.searchData.FCKWarehouseID = selectItem.FWarehouseID;
					that.searchData.FCKWarehouseName = selectItem.FWarehouseName;
				}

				if (ret.type == '入库仓库') {
					that.searchData.FRKWarehouseID = selectItem.FWarehouseID;
					that.searchData.FRKWarehouseName = selectItem.FWarehouseName;
				}

				if (ret.type == '审核状态') {
					that.searchData.Approve = selectItem.Approve;
					that.searchData.ApproveName = selectItem.ApproveName;
				}

				if (ret.type == '制单人') {
					that.$set(that.FilterFormData, 'CreaterData', JSON.parse(JSON.stringify(ret.data)))
					that.$set(that.FilterFormData, 'CreaterDataJoin', ret.data.map(item => item.Creater).join(
						','))
					that.$set(that.searchData, 'Creater', that.FilterFormData.CreaterDataJoin)
					console.log(that.searchData);
					that.$forceUpdate();
				}
			})

			uni.$on('BatchListRefresh', function(ret) {
				that.$refs.paging.reload();
			})
		},

		methods: {

			// 分页查询
			queryList(pageNo, pageSize) {
				let that = this;
				that.searchData.pageIndex = pageNo;
				that.searchData.pageSize = pageSize;

				that.Request.request('batchCode_dbdList', that.searchData, function(data) {
						that.$refs.paging.complete(data.data.ds);
					}, function(err) {
						that.$refs.paging.complete(false);
					}, that.Request.IPAgreement() + that.Request.serverIP() +
					'/Frame/SqlData', 1)
			},

			// 关闭搜索弹窗
			closeSearch() {
				this.showSearch = false;
			},

			// 查看单据
			intoRow(row) {
				let path = this.menu.AP_Link.replace('List', 'Edit');
				let menuName = encodeURIComponent(this.menu.APFunName);
				uni.navigateTo({
					url: path + '?FStockID=' + row.FStockID + '&menuName=' + menuName
				})
			},

			// 新增单据
			addRow() {
				let path = this.menu.AP_Link.replace('List', 'Edit');
				let menuName = encodeURIComponent(this.menu.APFunName);
				uni.navigateTo({
					url: path + '?FStockID=0' + '&menuName=' + menuName
				})
			},

			// 筛选查询
			searchList() {
				this.$refs.paging.reload();
				this.showSearch = false;
			},

			// 重置查询
			reset() {
				this.searchData = {
					pageSize: 20,
					pageIndex: 1,
					FBDate: '',
					FEDate: '',
					Creater: '',
					FCKWarehouseID: 0,
					FCKWarehouseName: '',
					FRKWarehouseID: 0,
					FRKWarehouseName: '',
					Approve: -1,
					ApproveName: '全部',
				};
				this.FilterFormData = { // 主表多选字段数据存储
					CreaterData: [],
					CreaterDataJoin: '',
				};
				this.$refs.paging.reload();
				this.showSearch = false;
			},

			// 公共下拉选择
			openBaseScreen(str) {
				let url = '/commonPage/Tool/baseScreen';
				let obj;

				if (str == '出库仓库') {
					obj = {
						allowClear: false,
						cmd: 'Droplist_Warehouse',
						type: str,
						ListeningName: 'BatchListChoice',
						refresherEnabled: false,
						serverSearch: {
							isPaging: false, //是否分页
							showText: 'FWarehouseName', //查询结果显示的字段
							ChoiceDataKey: 'FWarehouseID',
							ChoiceDataData: this.searchData.FCKWarehouseID
						},
						param: {

						}
					}
				}

				if (str == '入库仓库') {
					obj = {
						allowClear: false,
						cmd: 'Droplist_Warehouse',
						type: str,
						ListeningName: 'BatchListChoice',
						refresherEnabled: false,
						serverSearch: {
							isPaging: false, //是否分页
							showText: 'FWarehouseName', //查询结果显示的字段
							ChoiceDataKey: 'FWarehouseID',
							ChoiceDataData: this.searchData.FRKWarehouseID
						},
						param: {

						}
					}
				}

				if (str == '审核状态') {
					obj = {
						allowClear: false,
						cmd: 'Droplist_Approve',
						type: str,
						ListeningName: 'BatchListChoice',
						refresherEnabled: false,
						serverSearch: {
							isPaging: false, //是否分页
							showText: 'ApproveName', //查询结果显示的字段
							ChoiceDataKey: 'Approve',
							ChoiceDataData: this.searchData.Approve
						},
						param: {

						}
					}
				}

				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'BaseScreenParm',
					data: obj
				})

				uni.navigateTo({
					url: url
				})
			},
			openBaseScreen_check(str) {
				let url = '/commonPage/Tool/SelectBaseScreen';
				let obj;

				if (str == '制单人') {
					obj = {
						allowClear: false,
						cmd: 'batchCode_GetCreaterByDocuments',
						type: str,
						ListeningName: 'BatchListChoice',
						// multiple: false,
						serverSearch: {
							isPaging: false, //是否分页
							searchKey: 'SearchKey', //搜索关键词，应包含在param中
							showText: 'Creater', //查询结果显示的字段
							ChoiceDataKey: 'Creater', // 隐藏值
							ChoiceDataData: this.FilterFormData.CreaterData, //选中的数据
						},
						param: {
							SearchKey: '',
							FType: 'DBD',
						}
					}

				}

				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'BaseScreenParm',
					data: obj
				})

				uni.navigateTo({
					url: url
				})
			},
			getDateTitle() {
				if (this.dateIndex == 1) {
					return '单据开始日期'
				} else if (this.dateIndex == 2) {
					return '单据结束日期'
				}
			},
			// 打开日期选择
			openDate(index) {
				this.dateIndex = index;
				if (this.dateIndex == 1) {
					if (this.searchData.FBDate) {
						this.currentDate = this.searchData.FBDate;
					} else {
						this.currentDate = Number(new Date());
					}
				} else if (this.dateIndex == 2) {
					if (this.searchData.FEDate) {
						this.currentDate = this.searchData.FEDate;
					} else {
						this.currentDate = Number(new Date());
					}
				}

				this.showDate = true;
			},

			// 确认日期选择
			confirmDate(date) {
				if (this.dateIndex == 1) {
					this.searchData.FBDate = this.dateFormat(date.value);
				} else if (this.dateIndex == 2) {
					this.searchData.FEDate = this.dateFormat(date.value);
				}

				this.currentDate = date.value;
				this.showDate = false;
			},

			// 取消日期选择
			cancelDate() {
				this.currentDate = Number(new Date());
				this.showDate = false;
			},

			// 日期选择控件日期显示格式化
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},

			// 时间格式化
			dateFormat(val) {
				var that = this;
				if (!that.$utils.isEmpty(val)) {
					return that.Request.dateFormat(new Date(val), 'Y-MM-dd');
				} else {
					return '';
					// return that.Request.dateFormat(new Date(), 'Y-MM-dd');
				}
			}
		},

		onLoad(option) {

		},

		onUnload() {
			uni.$off('BatchListChoice');
			uni.$off('BatchListRefresh');
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/assets/scss/wms.scss";
</style>